<template>
	<view>
		<view class="auth" style="margin-top: 80rpx;">
			<uni-icons @click="onBack()" type="left" style="position: absolute;top: 66rpx;left: 20rpx; z-index: 999;"
				size="30"></uni-icons>
			<image src="../../../static/images/default/login_bg.png" mode="aspectFit"
				style="position: absolute;top: -100rpx;width: 105%;left: 0rpx;"></image>
			<view class="top" style="display: flex;align-items: center; position: relative;z-index: 999;">
				<view class="" style="margin: 15vw 0 0 0;  font-size: 6.93vw;font-weight: bold;">
					<text style=" display: block;color: black;">登录</text>

				</view>
				<view @tap="register" class="" style="margin: 15vw 0 0 3vw; color: black; font-size:6.93vw; ">注册
				</view>
			</view>
			<view style=" width: 13.6vw;height: 1.8vw;margin-top: -2vw; background: #ff8833; border-radius: 2vw;"
				class="act-block">

			</view>
			<form style=" display: block; margin-top: 15vw;" @submit="formSubmit">
				<view style="border-bottom: 0.5vw solid #D8D8D8;" class="auth-group radius-bock wlian-grey-light">
					<input type="text" placeholder="请输入您的手机号码" confirm-type="next" maxlength="16"
						placeholder-class="placeholder" name="account" :value="account"></input>
				</view>
				<!-- 密码框 -->
				<view style="border-bottom: 0.5vw solid #D8D8D8;" class=" auth-group radius-bock  wlian-grey-light">
					<input type="text" :password="showPassword" placeholder="请输入密码" confirm-type="done" maxlength="16"
						placeholder-class="placeholder" name="password" @input="onKeyInput"></input>
					<text :class="[!showPassword ? 'uni-eye-active' : '']" @click="changePassword">
						<svg v-if="showPassword" style="width: 5.06vw;height: 3.46vw;" t="1719972667913" class="icon"
							viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7474"
							width="200" height="200">
							<path
								d="M1024 512a527.36 527.36 0 0 0-220.16-250.88l71.68-71.68a25.088 25.088 0 0 0-35.84-35.84l-81.92 81.92a576 576 0 0 0-261.12-61.44A547.328 547.328 0 0 0 5.12 512l-5.12 10.24 5.12 10.24A532.992 532.992 0 0 0 220.16 768L153.6 834.56a24.576 24.576 0 0 0 0 35.84 18.944 18.944 0 0 0 15.36 5.12 18.944 18.944 0 0 0 15.36-5.12l76.8-76.8a576 576 0 0 0 245.76 56.32h5.12a558.592 558.592 0 0 0 501.76-322.56l5.12-10.24z m-967.68 10.24a498.688 498.688 0 0 1 445.44-302.08 571.904 571.904 0 0 1 225.28 46.08l-107.52 107.52a177.152 177.152 0 0 0-102.4-35.84 170.496 170.496 0 0 0-168.96 168.96 190.464 190.464 0 0 0 35.84 102.4l-117.76 117.76a429.568 429.568 0 0 1-209.92-204.8z m578.56-10.24a124.416 124.416 0 0 1-122.88 122.88 102.4 102.4 0 0 1-66.56-20.48L614.4 445.44a112.64 112.64 0 0 1 20.48 66.56z m-240.64 0a124.416 124.416 0 0 1 122.88-122.88 102.4 102.4 0 0 1 66.56 20.48l-168.96 168.96a94.208 94.208 0 0 1-20.48-66.56z m122.88 291.84a506.88 506.88 0 0 1-215.04-46.08L409.6 650.24a177.152 177.152 0 0 0 102.4 35.84 170.496 170.496 0 0 0 168.96-168.96 190.464 190.464 0 0 0-35.84-102.4l117.76-117.76a515.584 515.584 0 0 1 204.8 225.28 501.76 501.76 0 0 1-450.56 281.6z"
								fill="#2c2c2c" p-id="7475"></path>
						</svg>
						<svg v-else style="width: 5.06vw;height: 3.46vw;" t="1719972637261" class="icon"
							viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7315"
							width="200" height="200">
							<path
								d="M512 849.92a563.2 563.2 0 0 1-506.88-317.44l-5.12-10.24 5.12-10.24a548.864 548.864 0 0 1 1013.76 0l5.12 10.24-5.12 10.24a558.592 558.592 0 0 1-501.76 322.56 5.12 5.12 0 0 0-5.12-5.12z m-455.68-327.68a512 512 0 0 0 465.92 281.6 516.608 516.608 0 0 0 455.68-286.72 504.32 504.32 0 0 0-921.6 5.12z"
								fill="#2c2c2c" p-id="7316"></path>
							<path
								d="M512 680.96a168.96 168.96 0 1 1 168.96-168.96 170.496 170.496 0 0 1-168.96 168.96z m0-291.84a122.88 122.88 0 1 0 122.88 122.88A124.416 124.416 0 0 0 512 389.12z"
								fill="#2c2c2c" p-id="7317"></path>
						</svg>

					</text>
				</view>
				<view style="display: flex;justify-content: space-between; ">
					<view class="text-left" style="color: #ff8833;" @tap="retrieve">
						忘记密码
					</view>
					<view class="text-right" style="color:  #ff8833;" @tap="phone">
						验证码登录
					</view>
				</view>

				<view style="margin-top: 10vw;" class="auth-button flex flex-direction">
					<button
						style=" border-radius: 86.4vw;   background: linear-gradient(90deg,  #ff8833 0%,  #ff8833 100%);color: white;"
						class="cu-btn sl radius-bock" form-type="submit" :disabled="submitDisabled">登 录</button>

					<!-- #ifdef MP-WEIXIN -->
					<button
						style=" border-radius: 86.4vw;color:  #ff8833; background-color: rgba(1,1, 1, 0); border: 2rpx solid #D8D8D8;"
						class="cu-btn sl radius-bock margin-top-bj" open-type="getPhoneNumber"
						@getphonenumber="decryptPhoneNumber">获取手机号一键登录</button>
					<!-- #endif -->
				</view>

				<!-- 同意服务条款 -->
				<checkbox-group style="margin-left: 6vw;" :class="checked == 1 ? 'shake-horizontal' : ''"
					class="auth-clause" @change="CheckboxChange">
					<checkbox 
						:class="checked == 2 ? 'checked' : ''" :checked="checked == 2 ? true : false" value="2" />
					<view class="text-right">
						登录即同意 <text style="color: #ff8833;"
							@tap="onDetails($store.state.common.appConfig.privacy_protection, '隐私保护')">《隐私权政策》</text><text
							style="color:#ff8833;"
							@tap="onDetails($store.state.common.appConfig.user_agreement, '用户协议')">《用户协议》</text>
					</view>
				</checkbox-group>
			</form>
		</view>
		<view class="auth-foot">
			<!-- #ifndef MP-WEIXIN -->
			<view class="third"
				style=" margin-bottom: 20.46vw; display: flex;flex-direction: column;align-items: center;">
				<text
					style="margin: 5vw 0; width: 24.26vw; height: 4.8vw;color: #9C9C9C;font-size:3.4vw;">第三方账号登录</text>
				<image style="width: 10.4vw;height: 10.4vw;" src="../../../static/images/user/weixin.png" mode="">
				</image>
			</view>
			<!-- #endif -->
		</view>
	</view>
</template>
<script>
	import graceChecker from '@/common/graceChecker'; //来自 graceUI 的表单验证， 使用说明见手册 http://grace.hcoder.net/doc/info/73-3.html
	export default {
		data() {
			return {
				code: '',
				orderid: '',
				submitDisabled: true,
				account: '',
				pageroute: '',
				checked: 0,
				showPassword: true,
				loginRes: {},
				providerList: [],
			};
		},
		onLoad(option) {
			// 用户名
			this.account = option.name;
			this.pageroute = option.url;

			// 核销过来的
			this.code = option.code
			this.orderid = option.orderid

			// #ifdef H5
			// 微信内置浏览器登录
			if (this.$jssdk.isWechat()) {
				let local = window.location.href; // 获取页面url
				let code = this.getUrlCode().code; // 截取code
				// 获取之前的code
				let oldCode = uni.getStorageSync('wanlshop:code');
				// 如果没有code，就去请求获取code
				if (code == null || code === '' || code == 'undefined' || code == oldCode) {
					let uri = encodeURIComponent(local);
					let page = this.$wanlshop.prePage().$mp.page;
					uni.setStorageSync('wanlshop:code', 0); // 设置旧的code为0，避免死循环
					window.location.href =
						`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.$wanlshop.config('appid')}&redirect_uri=${uri}&response_type=code&scope=snsapi_userinfo&state=${encodeURIComponent(`/${page.route}?${this.queryParams(page.options)}`)}#wechat_redirect`
				} else {
					let pageroute = this.getUrlCode().state; // 截取state
					uni.setStorageSync('wanlshop:code', code); // 保存最新code
					this.$api.post({
						url: '/wanlshop/user/third',
						loadingTip: '微信登录中...',
						data: {
							platform: 'h5_weixin',
							code: code,
							client_id: uni.getStorageSync("wanlshop:chat_client_id") ? uni.getStorageSync(
								"wanlshop:chat_client_id") : null
						},
						success: res => {
							this.$store.dispatch('user/login', res);
							this.$store.dispatch('cart/login');
							this.$store.dispatch('chat/get');
							uni.reLaunch({
								url: decodeURIComponent(pageroute)
							});
						}
					});
				}
			} else {
				let page = this.$wanlshop.prePage().$mp.page;
				this.pageroute = encodeURIComponent(`/${page.route}?${this.queryParams(page.options)}`);
			}
			// 未来版本开发
			// this.providerList = [{
			// 	name: 'wlIcon-QQ',
			// 	platform: 'web_qq'
			// }];
			// #endif

			// 获取第三方登录
			// #ifndef H5
			let page = this.$wanlshop.prePage().$mp.page;
			this.pageroute = encodeURIComponent(`/${page.route}?${this.queryParams(page.options)}`);
			uni.getProvider({
				service: 'oauth',
				success: (res) => {
					this.providerList = res.provider.map((value) => {
						let providerName = '';
						let platform = '';
						switch (value) {
							case 'weixin':
								providerName = 'wlIcon-WeChat';
								// #ifdef MP
								platform = 'mp_weixin';
								// #endif
								// #ifdef APP-PLUS
								platform = 'app_weixin';
								// #endif
								break;
							case 'qq':
								providerName = 'wlIcon-QQ'
								// #ifdef MP
								platform = 'mp_qq';
								// #endif
								// #ifdef APP-PLUS
								platform = 'app_qq';
								// #endif
								break;
							case 'sinaweibo':
								providerName = 'wlIcon-WeiBo'
								platform = 'app_weibo';
								break;
							case 'xiaomi':
								providerName = 'wlIcon-Xiaomi'
								platform = 'app_xiaomi';
								break;
							case 'apple':
								providerName = 'wlIcon-Apple'
								platform = 'apple';
								break;
						}
						return {
							id: value,
							name: providerName,
							platform: platform
						}
					});
				},
				fail: (error) => {
					console.log('获取登录通道失败', error);
				}
			});
			// #endif

			// 防止刷新登录态，uni.login code提前获取
			// #ifdef MP-WEIXIN
			uni.login({
				provider: 'weixin',
				success: res => {
					this.loginRes = res;
				},
				fail: err => {
					this.$wanlshop.msg(err.msg);
				}
			});
			// #endif
		},
		methods: {
			onBack() {
				uni.navigateBack()
			},

			changePassword: function() {
				this.showPassword = !this.showPassword;
			},

			CheckboxChange(e) {
				this.checked = e.detail.value;
			},

			onKeyInput: function(e) {
				this.submitDisabled = false
			},
			// 号码登录，暂时支持微信小程序，后续版本逐渐开发
			decryptPhoneNumber(e) {
				if (e.detail.errMsg != "getPhoneNumber:fail user deny") {
					this.$api.post({
						url: '/wanlshop/user/phone',
						data: {
							encryptedData: e.detail.encryptedData,
							iv: e.detail.iv,
							code: this.loginRes.code,
							client_id: uni.getStorageSync("wanlshop:chat_client_id") ? uni.getStorageSync(
								"wanlshop:chat_client_id") : null
						},
						success: res => {
							this.$store.dispatch('user/login', res);
							this.$store.dispatch('cart/login');
							// 返回页面
							uni.reLaunch({
								url: decodeURIComponent(this.pageroute)
							});
						}
					});
				}
			},
			formSubmit: function(e) {
				if (this.checked == 2) {
					console.log(1)
					//定义表单规则
					var rule = [{
							name: 'account',
							checkType: 'notnull',
							errorMsg: '请输入用户名'
						},
						{
							name: 'password',
							checkType: 'string',
							checkRule: '6,16',
							errorMsg: '密码至少6位'
						}
					];
					//进行表单检查
					var formData = e.detail.value;
					var checkRes = graceChecker.check(formData, rule);
					if (checkRes) {
						this.$api.post({
							url: '/wanlshop/user/login',
							data: {
								account: formData.account,
								password: formData.password,
								client_id: uni.getStorageSync("wanlshop:chat_client_id") ? uni.getStorageSync(
									"wanlshop:chat_client_id") : null
							},
							success: res => {
								this.$store.dispatch('user/login', res);
								this.$store.dispatch('cart/login');
								this.$store.dispatch('chat/get');
								// 核销过来的
								if (this.code && this.orderid) {
									this.$wanlshop.msg('登录成功');
									return uni.reLaunch({
										url: `/pages/user/auth/verification?code=${this.code}&orderid=${this.orderid}`
									})
								}
								uni.reLaunch({
									url: decodeURIComponent(this.pageroute)
								});
								console.log('登录成功')
								this.$wanlshop.msg('登录成功');
								setTimeout(() => {
									uni.reLaunch({
										url: "/pages/user"
									});
								}, 300)
							}
						});
					} else {
						this.$wanlshop.msg(graceChecker.error);
					}
				} else {
					this.checked = 1;
					setTimeout(() => {
						this.checked = 0;
						this.$wanlshop.msg('请先同意隐私权政策和用户协议');
					}, 300)
				}
			},
			retrieve() {
				this.$wanlshop.to(`retrieve?url=${this.pageroute}`);
			},
			phone() {
				this.$wanlshop.to(`phone?url=${this.pageroute}`);
			},
			register() {
				this.$wanlshop.to(`register?url=${this.pageroute}`);
			},
			help() {
				this.$wanlshop.to(`/pages/user/help?url=${this.pageroute}`);
			},
			queryParams(data, isPrefix = false) {
				let prefix = isPrefix ? '?' : ''
				let _result = []
				for (let key in data) {
					let value = data[key]
					// 去掉为空的参数
					if (['', undefined, null].includes(value)) {
						continue
					}
					if (value.constructor === Array) {
						value.forEach(_value => {
							_result.push(encodeURIComponent(key) + '[]=' + encodeURIComponent(_value))
						})
					} else {
						_result.push(encodeURIComponent(key) + '=' + encodeURIComponent(value))
					}
				}
				return _result.length ? prefix + _result.join('&') : ''
			}
		}
	};
</script>

<style lang="scss" scoped>
	@import url("auth.css");

	uni-checkbox.checked ::v-deep .uni-checkbox-input {
		border-radius: 50% !important;

	}

	uni-checkbox.checked  ::v-deep .uni-checkbox-input-checked {
		background-color: #ff8833 !important;
		border-color: #ff8833 !important;
	}
	wx-checkbox ::v-deep .wx-checkbox-input {
		border-radius: 50% !important;
	
	}
	
	wx-checkbox  ::v-deep .wx-checkbox-input-checked {
		background-color: #ff8833 !important;
		border-color: #ff8833 !important;
	}
</style>